import Vue from "vue";
import Vuex from "vuex";
import vuexPersist from "vuex-persist";

Vue.use(Vuex);

// vuex是一个仓库，存放公共数据，任何组件都可以使用vuex里的公共数据
// vuex是vue的状态管理工具 状态指的就是数据

// 在本案例中购物车数据 被home组件和shopcar组件同时使用，这个时候购物车数据就适合被放进vuex中管理

export default new Vuex.Store({
  state: {
    todolist: [
      {
        title: "任务1",
        state: 0,
        time: "2020-8-14",
      },
      {
        title: "任务2",
        state: 1,
        time: "2020-8-14",
      },
      {
        title: "任务3",
        state: 2,
        time: "2020-8-14",
      },
    ],
    //
  },
  mutations: {
    add(state, obj) {
      state.todolist.push(obj);
    },

    change(state, i) {
      state.todolist.forEach((item, index) => {
        if (index == i) {
          if (item.state == 0) {
            item.state = 1;
            item.time = new Date().toLocaleString();
          } else {
            item.state = 0;
          }
        }
      });
    },
    cancel(state, i) {
      state.todolist.forEach((item, index) => {
        if (index == i) {
          if (item.state == 0) {
            item.state = 2;
          } else {
            item.state = 0;
          }
        }
      });
    },
  },
  getters: {},
  //getters就相当于是之前记得计算属性 ，通过state得到新的值
  // this.$store.getters.xxx
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
});

// state 就是之前的data 数据
// mutations就是之前的methods 方法
// getters 就是之前的computed 计算属性

// 被公共管理的数据被放在state
// 在组件中 通过 this.$store.state.xxx 调用

// 如果要操作state，就使用 mutations操作state
// state只能在mutations中操作，不能在其他地方操作
// mutation调用：this.$store.commit("xxx",参数)

// getters 相当于是计算属性 想要通过state的值得到一个新的值的时候就用getters
// 调用 this.$store.getters.xxx
